<script setup lang="ts">
import {
  getDisplayData,
  getFeedbackData,
  getReportData,
  updateReport
} from '@/api/data'
import type {
  DisplayData,
  FeedbackData,
  FeedbackDataDetail,
  ReportData,
  ReportDataDetail
} from '@/types/data'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue'
import { CountTo } from 'vue3-count-to'
import * as echarts from 'echarts'
import { formatDate, formatDateFull } from '@/utils/format'
type EChartsOption = echarts.EChartsOption

// 获取统计分析数据
const displayData = ref<DisplayData>({} as DisplayData)
let register = ref<number>(0)
let active = ref<number>(0)
const regDate = ref<string[]>([])
const regData = ref<number[]>([])
const actDate = ref<string[]>([])
const actData = ref<number[]>([])
const getData = async () => {
  const result = await getDisplayData()
  displayData.value = result.data
  register.value = displayData.value.register[6].register
  active.value = displayData.value.active[6].active
  // 处理时间
  regDate.value = displayData.value.register.map((item) => {
    item.time = formatDate(item.time)
    return item.time
  })
  actDate.value = displayData.value.active.map((item) => {
    item.time = formatDate(item.time)
    return item.time
  })
  // 处理数据
  regData.value = displayData.value.register.map((item) => item.register)
  actData.value = displayData.value.active.map((item) => item.active)
}

// 获取反馈数据
const feedbackData = ref<FeedbackData>([])
const isShowFeedbackDialog = ref(false)
const feedbackDetail = ref<FeedbackDataDetail>({} as FeedbackDataDetail)
const getFeedData = async () => {
  const result = await getFeedbackData()
  feedbackData.value = result.data
  // 处理时间
  feedbackData.value = feedbackData.value.map((item) => {
    item.time = formatDateFull(item.time)
    return item
  })
}
// 反馈详情弹层
const feedbackDialog = (index: number) => {
  isShowFeedbackDialog.value = true
  feedbackDetail.value = feedbackData.value[index]
}
// 是否显示图片预览器
const isShowImg = ref(false)
const currentIndex = ref(-1)
const showImgViewer = (index: number) => {
  isShowImg.value = true
  currentIndex.value = index
}

// 获取举报数据
const reportData = ref<ReportData>([])
const repReadData = ref<ReportData>([])
const repNoReadData = ref<ReportData>([])
const isShowReportDialog = ref(false)
const tabsState = ref('')
const reportDetail = ref<ReportDataDetail>({} as ReportDataDetail)
const getRepData = async () => {
  const result = await getReportData()
  reportData.value = result.data
  // 处理时间
  reportData.value = reportData.value.map((item) => {
    item.time = formatDateFull(item.time)
    return item
  })
  // 过滤出未读
  repNoReadData.value = reportData.value.filter((item) => item.status === 0)
  // 过滤出已读
  repReadData.value = reportData.value.filter((item) => item.status === 1)
  // 默认展示的tabs
  if (repNoReadData.value.length !== 0) {
    tabsState.value = 'no'
  } else {
    tabsState.value = 'yes'
  }
}
// 举报详情弹层
const reportDialog = async (index: number, flag: number) => {
  isShowReportDialog.value = true
  if (flag === 0) {
    reportDetail.value = repNoReadData.value[index]
    await updateReport(reportDetail.value.id)
    getRepData()
  } else if (flag === 1) {
    reportDetail.value = repReadData.value[index]
  }
}

// 本周新增数据图表
const weekRegFun = () => {
  const weekReg = echarts.init(document.getElementById('weekReg'))
  const color = ['#000']
  let option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: regDate.value
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: regData.value,
        type: 'line',
        symbol: 'none',
        showSymbol: false,
        areaStyle: {}
      }
    ],
    color: color
  } as EChartsOption
  weekReg.setOption(option)
}

// 本周活跃数据图表
const weekActFun = () => {
  const weekAct = echarts.init(document.getElementById('weekAct'))
  const color = ['#000']
  let option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: actDate.value
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: actData.value,
        type: 'line',
        symbol: 'none',
        showSymbol: false,
        areaStyle: {}
      }
    ],
    color: color
  } as EChartsOption
  weekAct.setOption(option)
}

watch([regData, regDate, actData, actDate], () => {
  weekRegFun()
  weekActFun()
})

onMounted(() => {
  getData()
  getFeedData()
  getRepData()
})
</script>

<template>
  <el-row class="page-container">
    <!-- 左侧 -->
    <el-col :span="15">
      <!-- 数据统计 -->
      <el-row>
        <div class="row-style">
          <!-- 信息 -->
          <el-row style="display: flex; align-items: center">
            <img src="@/assets/avatar.png" class="avatar" />
            <div style="display: flex; flex-direction: column">
              <span> 墨影后台管理系统 </span>
              <span style="font-size: 14px; color: #697086"> 管理员 </span>
            </div>
          </el-row>
          <!-- 数据 -->
          <el-row
            style="
              margin-top: 14px;
              display: flex;
              justify-content: space-around;
            "
          >
            <!-- 总用户量 -->
            <div
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-row style="font-size: 14px; color: #697086">
                总用户量
              </el-row>
              <el-row style="font-size: 34px">
                <count-to
                  :start-val="0"
                  :end-val="displayData.users"
                  :duration="1500"
                />
              </el-row>
            </div>
            <!-- 今日新增 -->
            <div
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-row style="font-size: 14px; color: #697086">
                今日新增
              </el-row>
              <el-row style="font-size: 34px">
                <count-to :start-val="0" :end-val="register" :duration="1500" />
              </el-row>
            </div>
            <!-- 今日活跃 -->
            <div
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-row style="font-size: 14px; color: #697086">
                今日活跃
              </el-row>
              <el-row style="font-size: 34px">
                <count-to :start-val="0" :end-val="active" :duration="1500" />
              </el-row>
            </div>
            <!-- 本月反馈 -->
            <div
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-row style="font-size: 14px; color: #697086">
                本月反馈
              </el-row>
              <el-row style="font-size: 34px">
                <count-to
                  :start-val="0"
                  :end-val="displayData.feedback"
                  :duration="1500"
                />
              </el-row>
            </div>
            <!-- 本月举报 -->
            <div
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-row style="font-size: 14px; color: #697086">
                本月举报
              </el-row>
              <el-row style="font-size: 34px">
                <count-to
                  :start-val="0"
                  :end-val="displayData.report"
                  :duration="1500"
                />
              </el-row>
            </div>
          </el-row>
        </div>
      </el-row>

      <!-- 本周新增数据 -->
      <el-row>
        <div class="row-style">
          <el-row>
            <span>本周新增</span>
          </el-row>
          <el-row style="margin-top: 14px">
            <div id="weekReg" style="width: 100%; height: 400px"></div>
          </el-row>
        </div>
      </el-row>

      <!-- 本周活跃数据 -->
      <el-row>
        <div class="row-style">
          <el-row>
            <span>本周活跃</span>
          </el-row>
          <el-row style="margin-top: 14px">
            <div id="weekAct" style="width: 100%; height: 400px"></div>
          </el-row>
        </div>
      </el-row>
    </el-col>

    <!-- 右侧 -->
    <el-col :span="9">
      <el-row>
        <el-col
          :span="12"
          style="margin-right: 10px; background-color: #fff; flex: 1"
        >
          <div style="padding: 14px 0 0 14px">
            <el-row>
              <span>用户反馈</span>
            </el-row>
            <el-row style="margin-top: 14px">
              <el-scrollbar max-height="250px">
                <el-timeline style="max-width: 600px">
                  <el-timeline-item
                    v-for="(item, index) in feedbackData"
                    :key="index"
                    :timestamp="item.time"
                    placement="top"
                    style="cursor: pointer"
                    @click="feedbackDialog(index)"
                  >
                    {{ item.content }}
                  </el-timeline-item>
                </el-timeline>
              </el-scrollbar>
            </el-row>
          </div>
        </el-col>

        <!-- 日历 -->
        <el-col :span="12" style="background-color: #fff; flex: 1">
          <el-calendar ref="calendar" style="margin-top: 20px">
            <template #header="{ date }">
              <span>{{ date }}</span>
              <el-button-group>
                <el-button size="small" :icon="ArrowLeft"> </el-button>
                <el-button size="small" :icon="ArrowRight"> </el-button>
              </el-button-group>
            </template>
          </el-calendar>
        </el-col>
      </el-row>

      <el-row style="margin-top: 10px">
        <el-col style="flex: 1">
          <div style="background-color: #fff; padding: 14px">
            <el-row>
              <span>用户举报</span>
            </el-row>
            <el-tabs class="demo-tabs" v-model="tabsState" :stretch="true">
              <!-- 未读 -->
              <el-tab-pane label="未读" name="no">
                <template #label>
                  <span class="custom-tabs-label">
                    <el-badge
                      :value="repNoReadData.length"
                      class="item"
                      v-if="repNoReadData.length !== 0"
                    >
                      <span>&nbsp;&nbsp;未读&nbsp;&nbsp;</span>
                    </el-badge>
                    <span v-else>&nbsp;&nbsp;未读&nbsp;&nbsp;</span>
                  </span>
                </template>
                <el-scrollbar max-height="666px">
                  <el-timeline>
                    <el-timeline-item
                      v-for="(item, index) in repNoReadData"
                      :key="index"
                      :timestamp="item.time"
                      placement="top"
                      style="cursor: pointer"
                      @click="reportDialog(index, 0)"
                    >
                      <el-card class="text"> {{ item.content }} </el-card>
                    </el-timeline-item>
                  </el-timeline>
                </el-scrollbar>
              </el-tab-pane>
              <!-- 已读 -->
              <el-tab-pane label="已读" name="yes">
                <el-scrollbar max-height="666px">
                  <el-timeline>
                    <el-timeline-item
                      v-for="(item, index) in repReadData"
                      :key="index"
                      :timestamp="item.time"
                      placement="top"
                      style="cursor: pointer"
                      @click="reportDialog(index, 1)"
                    >
                      <el-card class="text"> {{ item.content }} </el-card>
                    </el-timeline-item>
                  </el-timeline>
                </el-scrollbar>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>

  <!-- 反馈详情Dialog弹层 -->
  <el-dialog v-model="isShowFeedbackDialog" title="反馈详情" width="666">
    <el-form :model="feedbackDetail" label-width="50px" style="padding: 10px">
      <el-form-item label="类型">
        <el-radio-group v-model="feedbackDetail.type" disabled class="ml-4">
          <el-radio :value="0">功能反馈</el-radio>
          <el-radio :value="1">优化建议</el-radio>
          <el-radio :value="2">其他反馈</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户">
        <el-input
          v-model="feedbackDetail.nickname"
          disabled
          v-if="feedbackDetail.nickname"
        ></el-input>
        <el-input v-model="feedbackDetail.username" disabled v-else></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input
          v-model="feedbackDetail.content"
          disabled
          type="textarea"
          autosize
        ></el-input>
      </el-form-item>
      <el-form-item label="配图" v-if="feedbackDetail.image.length > 0">
        <el-carousel :interval="3000" height="300px" style="width: 100%">
          <el-carousel-item
            v-for="(item, index) in feedbackDetail.image"
            :key="item"
            style="display: flex; justify-content: center; align-items: center"
            @click="showImgViewer(index)"
          >
            <el-image :src="item" class="img" />
          </el-carousel-item>
        </el-carousel>
        <el-image-viewer
          v-if="isShowImg"
          :url-list="feedbackDetail.image"
          :initial-index="currentIndex"
          hide-on-click-modal
          @close="isShowImg = false"
        />
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 举报详情Dialog弹层 -->
  <el-dialog v-model="isShowReportDialog" title="举报详情" width="666">
    <el-form :model="reportDetail" label-width="50px" style="padding: 10px">
      <el-form-item label="类型">
        <el-radio
          v-model="reportDetail.article_id"
          disabled
          :value="reportDetail.article_id"
          >文章</el-radio
        >
        <el-radio
          v-model="reportDetail.video_id"
          disabled
          :value="reportDetail.video_id"
          >视频</el-radio
        >
        <el-radio
          v-model="reportDetail.comment_id"
          disabled
          :value="reportDetail.comment_id"
          >评论</el-radio
        >
        <el-radio
          v-model="reportDetail.user_id"
          disabled
          :value="reportDetail.user_id"
          >用户</el-radio
        >
        <el-radio
          v-model="reportDetail.ur_id"
          disabled
          :value="reportDetail.ur_id"
          >平台</el-radio
        >
      </el-form-item>
      <el-form-item label="用户">
        <el-input
          v-model="reportDetail.nickname"
          disabled
          v-if="reportDetail.nickname"
        ></el-input>
        <el-input v-model="reportDetail.username" disabled v-else></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input
          v-model="reportDetail.content"
          disabled
          type="textarea"
          autosize
        ></el-input>
      </el-form-item>
      <el-form-item label="配图" v-if="reportDetail.image.length > 0">
        <el-carousel :interval="3000" height="300px" style="width: 100%">
          <el-carousel-item
            v-for="(item, index) in reportDetail.image"
            :key="item"
            style="display: flex; justify-content: center; align-items: center"
            @click="showImgViewer(index)"
          >
            <el-image :src="item" class="img" />
          </el-carousel-item>
        </el-carousel>
        <el-image-viewer
          v-if="isShowImg"
          :url-list="reportDetail.image"
          :initial-index="currentIndex"
          hide-on-click-modal
          @close="isShowImg = false"
        />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">
.page-container {
  display: flex;
  align-items: start;
  height: 100%;
  .row-style {
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: #fff;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .avatar {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 1px solid #dcdfe6;
    border-radius: 20px;
    margin-right: 14px;
  }
}

.el-calendar {
  --el-calendar-cell-width: 36px;
  --el-calendar-border: 0;
  .el-calendar__header {
    padding: 0 0 0 0;
    border-bottom: 0;
  }
  .el-button--small {
    border: 0;
    font-size: 16px;
  }
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-timeline {
  padding-left: 10px;
  padding-right: 14px;
}

.el-timeline-item {
  padding-bottom: 6px;
}

.text {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
</style>
